import 'package:flutter/material.dart';
import 'package:happy_elf_app/apis/user.dart';
import 'package:happy_elf_app/utils/adaption.dart';
import 'package:happy_elf_app/widgets/headerBack/index.dart';

class House extends StatefulWidget {
  const House({super.key});

  @override
  State<House> createState() => _HouseState();
}

class _HouseState extends State<House> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  int active = 1;
  Map enterTimes = {};
  int durationSec = 0; // 秒数

  @override
  void initState() {
    super.initState();
    enter('精灵空间');
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    leave('精灵空间');
    super.dispose();
  }

  // 页面进入
  void enter(String pageName) {
    durationSec = DateTime.now().millisecondsSinceEpoch;
    _sendEvent(pageName, "enter");
  }

  // 页面离开
  void leave(String pageName) {
    if (durationSec != 0) {
      final time =
          ((DateTime.now().millisecondsSinceEpoch - durationSec)).round();
      _sendEvent(pageName, "leave", time: time);
    }
  }

  Future<void> _sendEvent(String pageName, String type, {int? time}) async {
    Map data = {
      "pageName": pageName,
      "eventType": type,
      if (time != null) "duration": time
    };
    var res = await User().report(data);
    print('上报时间$res');
    if (res['code'] == 200) {}
  }

  Widget _buildTabItem(Map<String, dynamic> tab) {
    final bool isSelected = tab['value'] == active;
    return Expanded(
      child: GestureDetector(
        child: Container(
          height: 36.45,
          padding: const EdgeInsets.symmetric(horizontal: 8.80, vertical: 5.87),
          decoration: ShapeDecoration(
            color: isSelected ? Colors.white : const Color(0xFFF5F5F5),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            // 只有选中项显示阴影
            shadows: isSelected
                ? [
                    const BoxShadow(
                      color: Color(0x0C000000),
                      blurRadius: 2.93,
                      offset: Offset(0, 2.93),
                      spreadRadius: 0,
                    )
                  ]
                : null,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                tab['title'],
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: isSelected
                      ? const Color(0xFF3C3C3C)
                      : const Color(0xFF999999),
                  fontSize: 15,
                  fontFamily: 'Inter',
                  fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
                  height: 0.98,
                ),
              ),
            ],
          ),
        ),
        onTap: () {
          setState(() {
            active = tab['value'];
          });
        },
      ),
    );
  }

  Widget _buildDivider() {
    return Container(
      color: Colors.grey,
      width: 1.px,
      height: 18.px,
      margin: EdgeInsets.symmetric(horizontal: 10.px),
    );
  }

  // 切换
  Widget typeBuild() {
    return Container(
      width: 300,
      height: 40,
      padding: EdgeInsets.all(1.47),
      margin: EdgeInsets.symmetric(horizontal: 24),
      decoration: ShapeDecoration(
        color: const Color(0x99EEEEEE),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      child: Row(
        children: [
          _buildTabItem({'title': '树洞模式', 'value': 1}),
          _buildDivider(),
          _buildTabItem({'title': '普通模式', 'value': 2})
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        HeaderBack(title: '精灵屋', isFirst: false, callback: () {}),
        typeBuild(),
        Expanded(child: Container())
      ],
    );
  }
}
